<template>
  <!-- 主体区域 -->
  <section id="app">
    <TodoHeader @addList="add"></TodoHeader>
    <TodoMain :list="list" @delList="del"></TodoMain>
    <TodoFooter :list="list" @clean="cleanList"></TodoFooter>
  </section>
</template>

<script>
import TodoHeader from "./components/TodoHeader";
import TodoMain from "./components/TodoMain";
import TodoFooter from "./components/TodoFooter";

export default {
  data() {
    return {
      list: JSON.parse(localStorage.getItem('taskList')) || [
        { id: 1, title: '任务1' },
        { id: 2, title: '任务2' },
        { id: 3, title: '任务3' },
        //... 省略更多任务
      ]
    };
  },
  components: {  TodoHeader, TodoMain,TodoFooter },
  methods:{
    del(val){
      // 接收子组件传来的事件并进行删除操作
      this.list = this.list.filter(item => item.id!== val);
    },
    add(val){
      // 接收子组件传来的事件并添加任务
      this.list.push({ id: Date.now(), title: val });
    },
    cleanList(){
      // 接收子组件传来的事件并清空任务
      this.list = [];
    }
  },
  watch:{
    list: {
      handler(newVal) {
        // 任务列表发生变化时，持久化存储任务
        localStorage.setItem('taskList', JSON.stringify(newVal));
      },
      deep: true
    }
  }
};
</script>

<style></style>
